<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>SLCC Demo</title>
  <script src="../dist/slcc-browser.js"></script>
  <script src="./demo.js"></script>
  <link rel="stylesheet" type="text/css" href="./demo.css" />
</head>

<body>
  <input type="text" name="aaa" />
  <div style="position:absolute;top:60px;left:80px">
    <div id="wrapper"></div>
  </div>

  <div class="msg-placeholder" id="msg">
    <div class="loading" id="loading-animate">
      <span></span><span></span><span></span><span></span><span></span>
    </div>
    <span id="msg-text" class="msg-text">正在加载程序...</span>
  </div>

  <script>

    function calcScale(info) {
      const outer = document.documentElement || document.body
      const scaleY = outer.clientHeight / info.height
      const scaleX = outer.clientWidth / info.width

      return Math.min(scaleX, scaleY, 1);
    }
    
    // 获取鼠标键盘事件的实例，用于终止时间监听
    var mouseHandler, keyboardHandler
    function stopControlEventHijack() {
      if (mouseHandler !== undefined)
        mouseHandler.stop()

      if (keyboardHandler !== undefined)
        keyboardHandler.stop()
    }


    addEventListener("load", function () {
      // START 向日葵远程桌面
      var client = new SunloginControl.Client({
        // 客户端
        remoteid: 404433155, // 主机ID
        host: "xxxx.rc03.oray.com", // 主机地址
        p2pServer: "slp2p-embed01.oray.net",

        auth: {
          type: "login",
          password: "lbc!@#ccC"
        },
        port: 443,
        ssl: true,
        debug: false
      });

      client.on("disconnect", function () {
        updateMessage("连接已断开");
      });

      // 页面unload关闭客户端连接
      window.onunload = function () {
        client.disconnect();
      };

      updateMessage("开始连接");

      client
        .connect() // 客户端连接开始
        // 向日葵客户端流程： 登录验证 => P2P连接，嵌入SDK不需要
        .then(() => {
          updateMessage("正在登录客户端");
          return client.login();
        })
        .then(() => {
          updateMessage("正在连接P2P服务器");
          return client.forward("slp2p-embed01.oray.net");
        })
        .then(() => {
          // 连接桌面插件
          const desktop = new SunloginControl.Plugin.Desktop({ quality: 10 });
          client.connectPlugin(desktop);

          updateMessage("连接成功，等待桌面图像");

          // 初始化桌面
          var view = new SunloginControl.DesktopView(
            document.getElementById("wrapper")
          );
          var framesCount = (totalBytes = 0);

          // imageinfo 桌面图像信息
          desktop.on("imageinfo", info => {
            view.setImageInfo(info);

            // var scale = calcScale(info);
            // view.zoom(scale);
          });

          desktop.on("session", sessions => {
            console.log(sessions);
          });

          // 视频数据流事件
          // DesktopView 为通用软解方案，若客户实现解码方式监听此事件
          // stream Uint8Array H264视频流
          // info object {
          //   "streamId": 10201,
          //   "width": 1920,
          //   "height": 1080,
          //   "frameId": 0,
          //   "length": 41021,
          //   "type": 0
          // }
          desktop.on("stream", (stream, info) => {
            if (view._player === undefined) setTimeout(() => {
              // 传输鼠标（触摸）& 键盘(Win)事件，不传输任何主控端事件，即为观看
              // 下面两行远程控制启动后会对document拦截输入时间，通过各自的stop()方法中止拦截和控制操作
              mouseHandler = desktop.transportMouseEvent(view._player.canvas, {
                moveOutRelease: true
              });
              keyboardHandler = desktop.transportKeyBoardEvent(view._player.canvas);
            }, 0);


            desktop.sendDecodeFinishMessage(++framesCount)

            // framesCount++;
            // totalBytes += info.length;
            view.decode(stream, info);

            hideMessage();
          });
        })
        .catch(e => {
          console.log("Error occured: \n", e);
          updateMessage("连接失败");
        });
    });
  </script>
</body>

</html>